<!DOCTYPE html>
<html>
<head>
	<title>Vue.set全局操作</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="../static/vue.js"></script>
</head>
<body>
	<h1>Vue.set</h1>
	<hr>
	<div id="app">
		{{age}}
		<ul>
			<li v-for="item in arr">{{item}}</li>
		</ul>
	</div>
	<p><button onclick="add()">add</button></p>
	<div id="app-4">
	  	<ol>
		    <li v-for="todo in todos">
		      {{ todo.text }}
		    </li>
	  	</ol>
	</div>
	<script type="text/javascript">
		function add(){
			// Vue.set(ch,"age",2);
			// app.age++;
			// ch.age++;
			// vue在通过数组下标更新值的时候是无法检测到的，所以需要用Vue.set
			//app.arr[1]="dd";//无法改变；
			Vue.set(app.arr,1,'dd');
			Vue.set(app.arr,2,'ee');
		}
		var ch = {
			name:"chenhao",
			age:18,
			arr:["aa","bb","cc"]
		}
		var app = new Vue({
			el:"#app",
			data:ch
		});
		var app4 = new Vue({
		 	el: '#app-4',
		 	data: {
		    	todos: [
			      { text: '学习 JavaScript' },
			      { text: '学习 Vue' },
			      { text: '整个牛项目' }
			    ]
		 	}
		})
	</script>
</body>
</html>